<template>
	<view class="container">
		<z-paging ref="paging" v-model="itemList" @query="queryList" :fixed="true" :auto="true"
			empty-view-img="/static/empty.png" empty-view-text="暂无数据~" :empty-view-img-style="imgStyle">
			<view slot="top">
				<u-navbar height="50" :title="navTitle" title-color="#333" title-size="36">
				</u-navbar>
			</view>
			<view class="commentView" v-for="(item,index) in itemList" :key="index">
				<view class="userInfoView" v-if="item.user">
					<u-avatar :src="item.user.avatar_format" mode="circle" size="90"></u-avatar>
					<view class="userInfo">
						<view class="userTitle" v-if="item.user">{{item.user.nickname}}</view>
						<view class="userText" v-if="item.order_goods">
							<view v-if="item.order_goods.goods_is_open_spec == 1">已选：{{item.order_goods.goods_skus}}
							</view>
						</view>
					</view>
				</view>
				<view class="commentText">{{item.content}}</view>
				<view class="commentTabView" v-if="item.images_format">
					<view class="commentImage" v-for="(item,index2) in item.images_format" :key="index2">
						<u-image width="150rpx" height="150rpx" :src="item"
							@click="onPreview(item.images_format,index2)"></u-image>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgStyle: {
					width: '12rem',
					height: '9rem'
				},
				goodsId: '',
				itemList: [],
				navTitle: '评价列表'
			}
		},
		onLoad(res) {
			this.goodsId = this.$utils.strEmpty(res.id);
			this.$nextTick(function() {
				this.$refs.paging.reload();
			});
		},
		methods: {
			queryList(page, pageSize) {
				let self = this;
				self.$shops.shopGoodsAppraises(this.goodsId, {
					limit: pageSize,
					page: page
				}, false).then(res => {
					console.log(JSON.stringify(res, null, 2));
					self.navTitle = `评价列表(${res.total})`;
					self.$refs.paging.complete(res.list);
				}).catch(res => {
					self.$refs.paging.complete();
				});
			},
			onPreview(url,index) {
				uni.previewImage({
					current: index,
					urls: url
				});
			}
		}
	}
</script>

<style>
	@import url('goods-comment-list.css');

	page {
		background: #f5f5f5;
	}
</style>
